<template>
	<div id="" class="full">
		<div id="" class="headImg">
			<div id="" class="" class="imgBox">
				<img
					:src="msg.src">
			</div>
			<div id="" class="authentication">
				<span id="" class="span1">
					<svg t="1653902225291" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="4460" width="200" height="200">
						<path
							d="M213.333333 128C165.973333 128 128 166.4 128 213.333333L128 810.666667C128 857.6 166.4 896 213.333333 896L810.666667 896C857.6 896 896 857.6 896 810.666667L896 213.333333C896 166.4 857.6 128 810.666667 128M256 298.666667 725.333333 298.666667 725.333333 384 640 384 640 597.333333C640 620.8 659.2 640 682.666667 640 706.133333 640 725.333333 620.8 725.333333 597.333333L810.666667 597.333333C810.666667 668.16 753.493333 725.333333 682.666667 725.333333 611.84 725.333333 554.666667 668.16 554.666667 597.333333L554.666667 384 426.666667 384 426.666667 725.333333 341.333333 725.333333 341.333333 384 256 384"
							p-id="4461" fill="#158fc5"></path>
					</svg>
					该作品{{msg.author}}认证
				</span>
				<span class="span2">{{msg.name}}</span>

			</div>

		</div>
		<div id="" class="issuanceBox">
			<h2>所属专辑</h2>
			<div id="" class="issuanceAlbum">
				<span class="issuanceTitle">专辑名称</span>
				<span class="issuanceName">{{msg.name}}</span>
			</div>
			<div id="" class="issuanceNum">
				<span class="span1">发行</span>
				<span class="span2">700</span>

			</div>
			<br>
			<br>
		</div>
		<div id="" class="creatorBox">
			<h1>创作者介绍</h1>
			<div id="" class="content">
				<span id="" class="creatorUser">
					{{msg.author}}
				</span>
				<p>
					未来是一个万物上链的数字世界，数字藏品应用不再局限于艺术品、收藏品，将会扩展到数字身份、版权许可、品牌授权等多个领域，iBox的使命是构建一个全球领先的数字藏品电商平台。
				</p>
			</div>
			<br>
			<br>
			<br>
			<br>
		</div>
		
		<!-- 购买按钮 -->
		<div id="" class="buyBox" ref="buyBox">
			<button type="button" @click="showPopup()">购买</button>
		</div>

		<van-popup v-model="show" get-container="buyBox" class="showBox"  closeable
  position="bottom"
  :style="{ height: '30%' }">
			<button type="button" class="button1" @click="buySuccess()">确认支付</button>
			<button type="button" class="button2" @click="closePopus()">我在想想</button>
		</van-popup>
	</div>
</template>

<script>
	export default {
		name: "detail",
		data() {
			return {
				msg: '',
				show: false
			}
		},
		methods: {
			showPopup() {
				this.show = true;
			},
			//取消支付
			closePopus(){
				this.show=false
			},
			//成功购买
			buySuccess(){
				this.$toast.success('购买成功');
				this.show=false
			},
		},
		mounted(){
			console.log(this.$route.params)
			this.msg=this.$route.params
		}
	}
</script>

<style lang="less" scoped="scoped">
	* {
		margin: 0;
		padding: 0;
	}

	.full {
		position: relative;
		width: 100%;
		background-color: #f8fbff;

		.headImg {
			width: 100%;
			// height: 700px;
			overflow: hidden;

			.imgBox {
				position: relative;
				height: 500px;
				overflow: hidden;

				img {
					height: 100%;
					height: 500px;
				}
			}

			.authentication {
				// height: 100px;
				padding: 10px;
				box-sizing: border-box;
				background-color: #fff;

				span {
					height: 30px;
					display: block;
					padding-left: 10px;
					text-align: left;
					box-sizing: border-box;


					svg {
						position: relative;
						width: 20px;
						height: 20px;
						top: 5px;
					}
				}

				.span1 {
					font-size: 14px;

				}

				.span2 {
					font-size: 18px;
					font-weight: 700;
				}
			}


		}

		// 专辑
		.issuanceBox {
			position: relative;
			margin-top: 15px;
			background-color: #fff;

			h2 {
				display: block;
				text-align: left;
				padding: 10px 0 0 20px;
				box-sizing: border-box;
			}

			.issuanceAlbum {
				position: relative;
				display: flex;
				text-align: left;
				padding: 10px 0 0 20px;
				box-sizing: border-box;

				.issuanceTitle {
					color: #abaab9;
				}

				.issuanceName {
					margin-left: 20px;
				}
			}

			// 发行
			.issuanceNum {
				position: relative;
				display: flex;
				text-align: left;
				padding: 10px 0 0 20px;
				box-sizing: border-box;
				margin-bottom: 10px;
				background-color: #fff;


				.span1 {
					background-color: #abaab9;
					color: #fff;
					padding: 2px 5px 2px 5px;
					box-sizing: border-box;
				}

				.span2 {
					color: #696873;
					background-color: #bbbdbf;
					padding: 2px 5px 2px 5px;
					line-height: 20px;


				}
			}
		}

		// 创作者介绍
		.creatorBox {
			position: relative;
			margin-top: 25px;
			width: 100%;
			background-color: #fff;
			margin-bottom: 40px;

			h1 {
				display: block;
				text-align: left;
				padding: 10px 0 0 20px;
				box-sizing: border-box;
			}

			.content {
				width: 90%;
				padding: 10px 0 0 20px;
				box-sizing: border-box;

				.creatorUser {
					display: block;
					width: 100%;
					text-align: left;
					font-size: 22px;
					padding-left: 10px;
					font-weight: 600;
					box-sizing: border-box;
				}

				p {
					text-align: left;
					color: #696873;

				}
			}
		}

		//购买
		.buyBox {
			position: fixed;
			width: 100%;
			height: 50px;
			background-color: #fff;
			bottom: 0;

			button {
				position: relative;
				width: 200px;
				height: 40px;
				border: none;
				border-radius: 24px;
				background-color: #2c2c34;
				color: #fff;
				top: 5px;
			}


		}

		.showBox {
			width: 100%;
			height: 200px;
			display: flex;
			justify-content: center;
			align-items: center;
			
			button{
				width: 100px;
				height: 50px;
				margin: 0 10px 0 10px;
				border: none;
			}
			
			.button2{
				background-color: red;
				
			}
		}
	}
</style>
